import { Tabs, Tab, PackageManagerTabs } from '@theme';

# Vue2项目

在Vue2中，我们准备了三个示例项目作为参考，分别是：

- `vue-2-base`：基础项目，用于书写通用业务组件对外暴露，它通常是一些项目的基石。
- `vue-2-project`：基础项目，用于和其他通用业务组件进行集成，它通常是一些项目的业务逻辑。
- `vue-2-element`：基于elemenUI的项目模板，可直接用于业务的研发

> 💡TIP：三个业务的demo仅仅只是部分依赖以及emp的配置不一样，您可以根据您的业务需求进行自由选择或者组合。

## 前期准备

在开始之前，请确保您已经配备了如下开发环境：

- Node.js >= `20.0.0`
- npm >= `8`

> 💡TIP：建议您使用`nvm`来管理node版本，直接执行`nvm use 21`命令即可完成开发环境设置

### 安装emp⚡

[快速上手](/guide/start/quick-start)

### 项目初始化

在对项目进行初始化之前，我们先克隆`emp`仓库，将示例代码拉取到本地。

```bash
git clone https://github.com/empjs/emp
```

> 🚨 如果您无法拉取项目至本地，请检查您的网络环境或代理设置是否可以访问github，如果仍不能解决，请联系我们。

在拉取完成代码后，我们进入代码的根目录，安装项目依赖，推荐使用`PNPM`进行安装：

<PackageManagerTabs command="install" />

安装完依赖后，因为我们的vue2示例项目都引用了`@empjs/cli`和`@empjs/plugin-vue2`的构建产物，两个仓库的源代码在代码根目录下的**packages**目录下，我们需要构建打包它们。

首先，我们先构建`@empjs/cli`产物，先进入对应目录：

```bash
# 进入@empjs/cli项目
cd packages/cli
```

然后执行产物构建:
<PackageManagerTabs command="build" />

接下来，我们构建`@empjs/plugin-vue2`产物，进入对应的目录：
```bash
# 进入@empjs/plugin-vue2项目
cd ../plugin-vue2
```

然后执行产物构建:
<PackageManagerTabs command="build" />

构建成功后，运行Vue2示例项目的前期准备就完成了🎉。

> 💡TIP：为什么需要`@empjs/cli`和`@empjs/plugin-vue2`的构建产物？这是因为在emp项目中，我们的emp配置文件(emp.config.js)引用了这两个构建产物的代码，具体代码如下：
> ```js
> import {defineConfig} from '@empjs/cli'
> import vue from '@empjs/plugin-vue2'
> export default defineConfig(store => {
>   ...
>   return {
>     plugins: [vue()],
>     ...
>   }
> })
> ```

## 运行示例项目

> 🚧注意：在运行示例项目之前，请确保您已经完成了前期准备，并当前目录处于`emp`仓库的根目录下。

### vue-2-base

首先进入示例项目的根目录：

```bash
# 运行vue-2-base示例项目
cd projects/vue-2-base
```

然后运行代码：
<PackageManagerTabs command="dev" />

运行成功后，您可以访问`http://localhost:9001/`进行查看

### vue-2-project

首先进入示例项目的根目录：

```bash
# 运行vue-2-project示例项目
cd projects/vue-2-project
```

然后运行代码：
<PackageManagerTabs command="dev" />

运行成功后，您可以访问`http://localhost:9002/`进行查看

### vue-2-element

首先进入示例项目的根目录：

```bash
# 运行vue-2-element示例项目
cd projects/vue-2-element
```

然后运行代码：
<PackageManagerTabs command="dev" />

运行成功后，您可以访问`http://localhost:9003/`进行查看

## 目录约定

```
├── dist                        编译结果目录
    ├── node_modules                依赖目录
    ├── src                         源码目录
    |   ├── components              业务组件目录(可选)
    |   ├── store                   状态管理目录(可选)
    |   ├── views                   页面组件目录(可选)
    |   ├── App.vue                 页面入口
    |   ├── bootstrap.js            项目入口文件
    |   └── main.js                 项目入口文件
    ├── emp-config.js               emp配置文件
    └── package.json
```